import React, { useState } from 'react';
import { Breadcrumb, Card, ColorPicker, Input, Row, Col, Checkbox, Space, Button } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import './certification2Edit.css';

const Index: React.FC = () => {
  const [contentFlagA, setContentFlagA] = useState(true);
  const [contentFlagB, setContentFlagB] = useState(true);
  const [contentFlagC, setContentFlagC] = useState(true);
  const [contentFlagD, setContentFlagD] = useState(true);
  const [contentFlagE, setContentFlagE] = useState(true);

  const handelContentFlagA = () => {
    setContentFlagA(!contentFlagA);
  };
  const handelContentFlagB = () => {
    setContentFlagB(!contentFlagB);
  };
  const handelContentFlagC = () => {
    setContentFlagC(!contentFlagC);
  };
  const handelContentFlagD = () => {
    setContentFlagD(!contentFlagD);
  };
  const handelContentFlagE = () => {
    setContentFlagE(!contentFlagE);
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div
        className="title_box"
        style={{
          backgroundColor: 'white',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div style={{ fontSize: '20px', fontWeight: 'bold' }}>制证模板管理</div>
        <div style={{ marginLeft: '20px' }}>
          <Breadcrumb>
            <Breadcrumb.Item>毕业证管理</Breadcrumb.Item>
            <Breadcrumb.Item>制证模板管理</Breadcrumb.Item>
          </Breadcrumb>
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', padding: '0 1.5%' }}>
        {/* 左边模板 */}
        <Card style={{ width: '73%' }}>
          <p style={{ fontSize: '20px', fontWeight: 'bold' }}>2020届毕业模板</p>
          <div style={{ marginTop: '50px', height: '600px' }}>
            <img src="" alt="" style={{ width: '100%', height: '100%' }} />
          </div>
        </Card>
        {/* 右边编辑 */}
        <Card
          className="content_right_edit"
          style={{ position: 'relative', width: '25%', overflowY: 'scroll', height: '798px' }}
        >
          <p style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '20px' }}>自定义标题/文案</p>
          <div className="content_box">
            <div className="content_top">
              <p className="content_title">证书标题</p>
              <ColorPicker size="small" defaultValue="#1677ff" />
            </div>
            <div className="content_inp">
              <Input style={{ marginTop: '10px' }} />
            </div>
            <div className="content_position">
              <p style={{ whiteSpace: 'nowrap', fontSize: '16px' }} onClick={handelContentFlagA}>
                位置
              </p>
              {contentFlagA ? (
                <RightOutlined style={{ fontSize: '10px', marginLeft: '5px', color: '#999' }} />
              ) : (
                <div className="position_left">
                  <div>
                    <span>上：</span>
                    <Input />
                  </div>
                  <div>
                    <span>右：</span>
                    <Input />
                  </div>
                  <div>
                    <span>下：</span>
                    <Input />
                  </div>
                  <div>
                    <span>左：</span>
                    <Input />
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="content_box">
            <div className="content_top">
              <p className="content_title">毕业生姓名</p>
              <ColorPicker size="small" defaultValue="#1677ff" />
            </div>
            <div className="content_inp">
              <Input style={{ marginTop: '10px' }} />
            </div>
            <div className="content_position">
              <p style={{ whiteSpace: 'nowrap', fontSize: '16px' }} onClick={handelContentFlagB}>
                位置
              </p>
              {contentFlagB ? (
                <RightOutlined style={{ fontSize: '10px', marginLeft: '5px', color: '#999' }} />
              ) : (
                <div className="position_left">
                  <div>
                    <span>上：</span>
                    <Input />
                  </div>
                  <div>
                    <span>右：</span>
                    <Input />
                  </div>
                  <div>
                    <span>下：</span>
                    <Input />
                  </div>
                  <div>
                    <span>左：</span>
                    <Input />
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="content_box">
            <div className="content_top">
              <p className="content_title">出生年月</p>
              <ColorPicker size="small" defaultValue="#1677ff" />
            </div>
            <div className="content_inp">
              <Input style={{ marginTop: '10px' }} />
            </div>
            <div className="content_position">
              <p style={{ whiteSpace: 'nowrap', fontSize: '16px' }} onClick={handelContentFlagC}>
                位置
              </p>
              {contentFlagC ? (
                <RightOutlined style={{ fontSize: '10px', marginLeft: '5px', color: '#999' }} />
              ) : (
                <div className="position_left">
                  <div>
                    <span>上：</span>
                    <Input />
                  </div>
                  <div>
                    <span>右：</span>
                    <Input />
                  </div>
                  <div>
                    <span>下：</span>
                    <Input />
                  </div>
                  <div>
                    <span>左：</span>
                    <Input />
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="content_box">
            <div className="content_top">
              <p className="content_title">专业</p>
              <ColorPicker size="small" defaultValue="#1677ff" />
            </div>
            <div className="content_inp">
              <Input style={{ marginTop: '10px' }} />
            </div>
            <div className="content_position">
              <p style={{ whiteSpace: 'nowrap', fontSize: '16px' }} onClick={handelContentFlagD}>
                位置
              </p>
              {contentFlagD ? (
                <RightOutlined style={{ fontSize: '10px', marginLeft: '5px', color: '#999' }} />
              ) : (
                <div className="position_left">
                  <div>
                    <span>上：</span>
                    <Input />
                  </div>
                  <div>
                    <span>右：</span>
                    <Input />
                  </div>
                  <div>
                    <span>下：</span>
                    <Input />
                  </div>
                  <div>
                    <span>左：</span>
                    <Input />
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="content_box">
            <div className="content_top">
              <p className="content_title">学制</p>
              <ColorPicker size="small" defaultValue="#1677ff" />
            </div>
            <div className="content_inp">
              <Input style={{ marginTop: '10px' }} />
            </div>
            <div className="content_position">
              <p style={{ whiteSpace: 'nowrap', fontSize: '16px' }} onClick={handelContentFlagE}>
                位置
              </p>
              {contentFlagE ? (
                <RightOutlined style={{ fontSize: '10px', marginLeft: '5px', color: '#999' }} />
              ) : (
                <div className="position_left">
                  <div>
                    <span>上：</span>
                    <Input />
                  </div>
                  <div>
                    <span>右：</span>
                    <Input />
                  </div>
                  <div>
                    <span>下：</span>
                    <Input />
                  </div>
                  <div>
                    <span>左：</span>
                    <Input />
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="content_box">
            <div className="content_top">
              <p className="content_title">证书编号</p>
              <ColorPicker size="small" defaultValue="#1677ff" />
            </div>
            <div className="content_inp">
              <Input style={{ marginTop: '10px' }} />
            </div>
          </div>
          <div className="content_btn">
            <Button>取消</Button>
            <Button type="primary">保存</Button>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Index;
